<!--
 * @Author: QUAN
 * @Date: 2021-10-29 15:35:16
 * @LastEditTime: 2021-11-23 17:20:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \mutong-ketang-pc-mis\src\views\Activity\ActDetail.vue
-->
<template>
  <div class="act-detail">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ name: 'ActivityActList' }">
        活动列表
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        {{ editMode ? '活动详情' : '新增活动' }}
      </el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 内容 -->
    <el-form
      :model="info"
      label-width="110px"
      :rules="actRule"
      label-position="right"
      ref="actForm"
    >
      <el-form-item prop="title" label="活动名称" placeholder="请填写活动标题">
        <el-input v-model="info.title"></el-input>
      </el-form-item>
      <el-form-item prop="activityId" label="活动ID" v-if="info.id">
        <el-input v-model="info.activityId" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item prop="category" label="活动分类">
        <activity-category-sl v-model="info.category"></activity-category-sl>
      </el-form-item>
      <el-form-item prop="relateScheme" label="活动落地页">
        <el-input v-model="info.relateScheme" placeholder="请填写落地页scheme码"></el-input>
      </el-form-item>
      <el-form-item prop="showAttendees" label="活动入口是否展示参加人数">
        <el-radio-group v-model="info.showAttendees">
          <el-radio :label="1">展示</el-radio>
          <el-radio :label="0">不展示</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="endTime" label="活动结束时间">
        <el-date-picker
          v-model="info.endTime"
          type="datetime"
          placeholder="选择活动结束时间"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </el-form-item>
      <el-form-item prop="online" label="上下线">
        <el-radio-group v-model="info.online">
          <el-radio :label="1">上线</el-radio>
          <el-radio :label="0">下线</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="cover" label="活动封面图">
        <upload-resource
          is-public
          @upload="(img) => $set(info, 'cover', img.url)"
          :folder="'actImg' + '/' + imgDate"
        ></upload-resource>
        <el-row v-if="info.cover">
          <img style="max-height: 200px;" :src="info.cover" alt="" />
        </el-row>
        <el-button @click="$set(info, 'cover', '')" type="danger" v-if="info.cover">
          删除图片
        </el-button>
      </el-form-item>
      <p class="button-center">
        <el-button type="primary" @click="save" :loading="saveLoading">保存</el-button>
      </p>
    </el-form>
  </div>
</template>
<script>
  import EditMixins from 'mixins/Edit';
  import { FormRuleConf } from '@/config';
  import UploadResource from 'comp/UploadResource';
  export default {
    mixins: [EditMixins],
    data() {
      return {
        // 验证规则
        ...FormRuleConf.Act,
        // loading
        saveLoading: false,
      };
    },
    components: {
      UploadResource,
    },
    computed: {
      // 生成时间文件夹
      imgDate: function() {
        return this.dayjs().format('YYYY-MM-DD');
      },
    },
    created() {},
    mounted() {},
    methods: {
      // 得到数据
      getInfo() {
        if (!this.id || this.$route.name != 'ActivityActDetail' || this.infoGetting) return;
        this.infoGetting = true;
        this.$service
          .ActivityDetail({ id: this.id })
          .then((res) => {
            this.info = { ...res };
          })
          .finally(() => {
            this.infoGetting = false;
          });
      },
      
      // 保存
      save() {
        if (this.saveLoading) return;
        this.$refs.actForm.validate((valid) => {
          if (valid) {
            this.saveLoading = true;
            this.$service.ActivitySave(this.info).then((res) => {
              this.saveLoading = false;
              this.$message.success('保存成功');
              this.$tabs.open({
                name: 'ActivityActDetail',
                params: { id: res },
              });
            });
          }
        });
      },
    },
  };
</script>
<style lang="less" scoped>
  .act-detail {
    // 公共样式
    .button-center {
      text-align: center;
    }
    /deep/ .el-select,
    /deep/ .sc-select,
    /deep/ .el-input-number {
      width: 220px;
    }
  }
</style>
